<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
 .qqq{
  width: 200px;
  height: 100px;
  margin-bottom: 10px;
  background-color: aqua;
  overflow: auto;
 }
 .sssss{
  width: 200px;
  background-color: red;
 }
 /* 换行word-break:break-all和word-wrap:break-word的区别(https://zhuanlan.zhihu.com/p/372306049?utm_id=0) */
 .qqaww{
  width: 67px;
  background-color: red;
  margin-top: 10px;
  /* 换行推荐用word-break:break-all， word-wrap:break-word末尾是单词的话，整个单词换行，会留空白*/
  word-break:break-all;
  /* white-space: nowrap;让文本不换行 */
 }
 .qqa{
  width: 67px;
  background-color: red;
  margin-top: 10px;
  word-wrap:break-word;
 }
</style>
<body>
  <!-- 汉字会自动换行，数字和字母不会 -->
  <div class="qqq">后盾人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是后盾人永远不变的追求。</div>
  <div class="sssss">后盾人自2010年创立至今，免费发布了大量高质量视频教程，视频在优酷、土豆、酷六等视频网站均有收录，很多技术爱好者受益其中。除了免费视频外，后盾人还为大家提供了面授班、远程班、公益公开课、VIP系列课程等众多形式的学习途径。后盾人有一群认真执着的老师，他们一心为同学着想，将真正的知识传授给大家是后盾人永远不变的追求。</div>
  <div style="width:200px;background-color: aquamarine;">11111111111111111111111111111111111111111111111111111111111</div>
  <div style="width:200px;background-color: aquamarine;overflow: auto;">11111111111111111111111111111111111111111111111111111111111</div>
  <div class="qqaww">some some somesomesomesomesomesomesomesomesomesomesome some</div>
  <div class="qqa">some some somesomesomesomesomesomesomesomesomesomesome some</div>
<pre>
  <code>
    <version>版本</version>
  </code>
  
</pre>
  <pre>
    wssdd
    ddwws


    dddww
  </pre>
</body>
<script>
    
    
</script>
</html>
